<template>
    <div id="activity">
        <!-- 促销活动表单 -->
        <el-form v-show="formFlag" :model="params" :inline="true" class="demo-form-inline">
            <el-form-item label="活动名称">
                <el-input v-model="params.name" placeholder="请输入活动名称" clearable></el-input>
            </el-form-item>
            <el-form-item label="渠道名称">
                <el-select v-model="params.channelId" placeholder="请选择渠道" clearable>
                    <el-option v-for="item in channelList" :key="item.channelId" :value="item.channelId"
                        :label="item.channelName" />
                </el-select>
            </el-form-item>
            <el-form-item label="活动状态">
                <el-select v-model="params.status" placeholder="请选择活动状态" clearable>
                    <el-option value="1" label="正常" />
                    <el-option value="0" label="禁用" />
                </el-select>
            </el-form-item>
            <el-form-item label="活动类型">
                <el-select v-model="params.type" placeholder="请选择活动类型" clearable>
                    <el-option value="1" label="折扣卷" />
                    <el-option value="2" label="代金券" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" :icon="Search" @click="getActivityList()">搜索</el-button>
                <el-button :icon="Refresh" @click="resetFn">重置</el-button>
            </el-form-item>
        </el-form>

        <!-- 操作栏 -->
        <ActionBar v-model:titFlag="titFlag" v-model:dialogFlag="dialogFlag" v-model:formFlag="formFlag"
            v-model:btnFlagArr="btnFlagArr" @delFn="setDelList" @touchDerive="deriveXlsx" @editPrepare="editPrepare"
            :getList="getActivityList">
        </ActionBar>

        <!-- 表格 -->
        <el-table :data="activityList" v-loading="loadingFlag" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="activityId" label="活动编号" width="80" align="center"></el-table-column>
            <el-table-column prop="name" label="活动名称" width="120" align="center"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="channelName" label="渠道名称" width="120" align="center"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="info" label="活动简介" width="180" align="center"
                show-overflow-tooltip></el-table-column>
            <el-table-column prop="type" label="活动类型" width="80" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.type == 1">折扣卷</el-tag>
                    <el-tag type="success" v-else>代金券</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="discount" label="活动明细" width="120" align="center" show-overflow-tooltip>
                <template #default="scope">
                    折扣卷/{{ scope.row.discount }}折
                </template>
            </el-table-column>
            <el-table-column prop="status" label="活动状态" width="80" align="center">
                <template #default="scope">
                    <el-tag v-if="scope.row.status == 1">正常</el-tag>
                    <el-tag type="info" v-else>禁用</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="createTime" label="活动起始时间" width="180" align="center"></el-table-column>
            <el-table-column prop="endTime" label="活动结束时间" width="180" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
                <template #default="scope">
                    <el-button type="primary" text :icon="Edit"
                        @click="editPrepare(scope.row.activityId)">修改</el-button>
                    <el-button type="primary" text :icon="Delete"
                        @click="setDelList(scope.row.activityId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 页码 -->
        <Pagination v-model:list="params" :total="total" @getList="getActivityList()"></Pagination>

        <!-- 新增/修改 弹窗 -->
        <Dialog v-model:dialogFlag="dialogFlag" :titFlag="titFlag" :channelList="channelList" @formData="handleList"
            ref="dialogRef"></Dialog>
    </div>
</template>

<script setup>
import ActionBar from '@/components/LCommon/ActionBar'
import Pagination from '@/components/LCommon/Pagination'
import Dialog from './components/Dialog.vue';
import { ref } from 'vue';
import { apiActivityList, apiChannelList, apiDelList, apiDeriveXlsx, apiGetEditList, apiAddList, apiEditList } from '../../../api/activity/activity';
import { Edit, Delete, Search, Refresh } from '@element-plus/icons-vue'
import comhooks from '@/hooks/DeriveXlsx'
import { ElMessage } from 'element-plus';

const myhooks = comhooks()

// 获取子组件实例
const dialogRef = ref(null)

// 获取促销活动数据
const obj = {
    pageNum: 1,
    pageSize: 10,
    name: '',
    channelId: null,
    type: null,
    status: null
}
const params = ref({ ...obj })
const loadingFlag = ref(false)
const total = ref(0)
const activityList = ref([])
// 获取数据
const getActivityList = async () => {
    loadingFlag.value = true
    const res = await apiActivityList(params.value)
    activityList.value = res.rows
    total.value = res.total
    loadingFlag.value = false
}
getActivityList()

// 获取渠道数据
const channelList = ref([])
const getChannelList = async () => {
    const res = await apiChannelList()
    channelList.value = res.data
}
getChannelList()

// 重置
const resetFn = () => {
    params.value = { ...obj }
    getActivityList()
}

// 选中哪行表格
const btnFlagArr = ref([])
const handleSelectionChange = (val) => {
    btnFlagArr.value = val
}

// 删除
const setDelList = (id) => {
    let ids = id ? id : btnFlagArr.value
    id && (ids = ids.map(item => item.activityId).join(','))
    myhooks.delPointOutFn(ids, apiDelList, getActivityList)
}

// 导出
const deriveXlsx = async () => {
    const res = await apiDeriveXlsx()
    myhooks.deriveXlsx(res)
}

// 显示隐藏上方form表单
const formFlag = ref(true)

// 弹窗 新增 or 修改  标题
const titFlag = ref('add')

// 弹窗开关
const dialogFlag = ref(false)

// 点击修改获取的数据
const editPrepare = async (id) => {
    const ids = id ? id : btnFlagArr.value[0].activityId
    id && (dialogFlag.value = true)
    const { data } = await apiGetEditList(ids)
    dialogRef.value.formList = { ...data }
    dialogRef.value.formList.timeData = [data.beginTime, data.endTime]
}

// 新增 or 修改
const handleList = async (list) => {
    if (titFlag.value === 'add') {
        try {
            await apiAddList(list)
            ElMessage.success('添加成功')
            params.value.pageNum = Math.ceil(total.value /  params.value.pageSize)
        } catch (err) { }
    }else {
        try {
            await apiEditList(list)
            ElMessage.success('修改成功')
        }catch (err) {}
    }
    getActivityList()
}

</script>

<style lang="scss" scoped>
#activity {
    padding: 20px;

    .demo-form-inline {

        .el-input {
            --el-input-width: 212px;
        }

        .el-select {
            --el-select-width: 212px;
        }
    }
}
</style>